<style scoped>
    .btn-block {
        height: 70px;
        line-height: 70px;
        padding-left: 80px;
        border-top: 1px solid #eee;
    }

</style>
<template>
    <div>
        <div class="top-title bg-white">
            <div>
                <div @click="$router.back()" class="back-btn">
                    <Icon type="ios-arrow-back"/>
                </div>
                <a @click="$router.back()">班次管理</a> / {{$route.query.id? '编辑': '新增'}}
            </div>
        </div>
        <div class="page-content" style="height: calc(100% - 50px);">

            <div class="content-block bg-white p-20" style="padding-right: 100px">

                <template>

                    <div class="">
                        <div class="top-title-text black blod">基础信息</div>
                        <div class="p-10-0">
                            <div class="flex-c">
                                <div class="w30p flex-c">
                                    <div class="w100"> 班次名称 <span class="red">*</span></div>
                                    <Input v-model="detail.bc_mc" placeholder="请输入" class="w240"></Input>
                                </div>
                            </div>
                        </div>
                        <div class="p-10-0">
                            <div class="flex-c m-b-15">
                                <div class=" flex-c">
                                    <div class="w100"> 上下班次数 <span class="red">*</span></div>
                                    <RadioGroup v-model="detail.sxb_cs" type="button" button-style="solid">
                                        <Radio label="1">1 次上下班</Radio>
                                        <Radio label="2">2 次上下班</Radio>
                                        <Radio label="3">3 次上下班</Radio>
                                    </RadioGroup>
                                </div>
                            </div>
                        </div>
                    </div>


                    <div class="">
                        <div class="top-title-text black blod">班次考勤时间设置</div>

                        <div class="p-10-0"
                             v-for="(item, i) in detail.sxb"
                             :key="i"
                             v-show="i < detail.sxb_cs"
                        >
                            <Card :bordered="false" dis-hover>
                                <!--<p slot="title">工作时长：8 小时 0 分钟</p>-->
                                <p slot="title">上下班 {{i + 1}}</p>
                                <div style="width:80%;background-color: #f8f8f8" class="p-20">
                                    <div class="flex m-b-10">
                                        <div class="flex-1 flex-c">
                                            <div>上班时间</div>
                                            <div class="m-l-10">
                                                <TimePicker v-model="item.sb_sj" format="HH:mm" confirm placeholder="请选择" style="width: 168px"></TimePicker>
                                            </div>
                                        </div>
                                        <div class="flex-1 flex-column">
                                            <div class="m-b-10">晚到超过
                                                <Input v-model="item.sb_pd" style="width: 60px"></Input>
                                                分钟记为迟到
                                            </div>
                                            <div class="m-b-10">晚到超过
                                                <Input v-model="item.sb_qk" style="width: 60px"></Input>
                                                分钟记为半天缺卡
                                            </div>
                                            <div class="m-b-10" style="margin-left: -13px">最早可提前
                                                <Input v-model="item.sb_tqdk" style="width: 60px"></Input>
                                                分钟进行打卡
                                            </div>
                                        </div>
                                    </div>
                                    <Divider/>

                                    <div class="flex">
                                        <div class="flex-1 flex-c">
                                            <div>下班时间</div>
                                            <div class="m-l-10">
                                                <TimePicker v-model="item.xb_sj" format="HH:mm" confirm placeholder="请选择" style="width: 168px"></TimePicker>
                                            </div>
                                        </div>
                                        <div class="flex-1 flex-column">
                                            <div class="m-b-10">最早提前
                                                <Input v-model="item.xb_pd" style="width: 60px"></Input>
                                                分钟记为早退
                                            </div>
                                            <div class="m-b-10">最早提前
                                                <Input v-model="item.xb_qk" style="width: 60px"></Input>
                                                分钟记为半天缺卡
                                            </div>
                                            <div class="m-b-10" style="margin-left: -13px">最晚可延后
                                                <Input v-model="item.xb_tqdk" style="width: 60px"></Input>
                                                分钟进行打卡
                                            </div>
                                        </div>
                                    </div>
                                    <Divider/>
                                    <div class="flex-1 flex-c">
                                        <div>休息时间</div>
                                        <div class="m-l-10">
                                            <TimePicker v-model="item.xxsj_ks" format="HH:mm" confirm placeholder="请选择开始" style="width: 168px"></TimePicker>
                                            -
                                            <TimePicker v-model="item.xxsj_js" format="HH:mm" confirm placeholder="请选择结束" style="width: 168px"></TimePicker>
                                            <!--<TimePicker type="timerange" class="w240" confirm placeholder="请选择"></TimePicker>-->
                                        </div>
                                    </div>
                                </div>
                            </Card>
                        </div>

                    </div>

                </template>

                <div class="btn-block">
                    <Button @click="$router.back()" class="m-r-10">取消</Button>
                    <Button @click="confirm" type="primary">提交</Button>
                </div>

            </div>
        </div>
    </div>
</template>

<script>

    export default {
        data() {
            return {
                detail: {
                    "bc_mc": "",
                    "sxb_cs": "1",
                    "sxb": [
                        {
                            "sb_sj": "08:00",
                            "xb_sj": "18:00",
                            "sb_pd": "30",
                            "sb_qk": "30",
                            "xb_pd": "30",
                            "xb_qk": "30",
                            "sb_tqdk": "60",
                            "xb_tqdk": "20",
                            "xxsj_ks": "12:00",
                            "xxsj_js": "14:00",
                        },
                        {
                            "sb_sj": "08:00",
                            "xb_sj": "18:00",
                            "sb_pd": "30",
                            "sb_qk": "30",
                            "xb_pd": "30",
                            "xb_qk": "30",
                            "sb_tqdk": "60",
                            "xb_tqdk": "20",
                            "xxsj_ks": "12:00",
                            "xxsj_js": "14:00",
                        },
                        {
                            "sb_sj": "08:00",
                            "xb_sj": "18:00",
                            "sb_pd": "30",
                            "sb_qk": "30",
                            "xb_pd": "30",
                            "xb_qk": "30",
                            "sb_tqdk": "60",
                            "xb_tqdk": "20",
                            "xxsj_ks": "12:00",
                            "xxsj_js": "14:00",
                        },
                    ],
                },
            }
        },
        watch: {
            'detail.sxb_cs'(newVal) {
                if(this.detail.sxb.length < newVal) {
                    this.detail.sxb.push({
                        "sb_sj": "08:00",
                        "xb_sj": "18:00",
                        "sb_pd": "30",
                        "sb_qk": "30",
                        "xb_pd": "30",
                        "xb_qk": "30",
                        "sb_tqdk": "60",
                        "xb_tqdk": "20",
                        "xxsj_ks": "12:00",
                        "xxsj_js": "14:00",
                    })
                }
                if(this.detail.sxb.length < newVal) {
                    this.detail.sxb.push({
                        "sb_sj": "08:00",
                        "xb_sj": "18:00",
                        "sb_pd": "30",
                        "sb_qk": "30",
                        "xb_pd": "30",
                        "xb_qk": "30",
                        "sb_tqdk": "60",
                        "xb_tqdk": "20",
                        "xxsj_ks": "12:00",
                        "xxsj_js": "14:00",
                    })
                }
            }
        },
        created() {
            if(this.$route.query.id) {
                this.getDetail()
            }
        },
        methods: {

            getDetail() {

                let postData = {
                    bc_id: this.$route.query.id
                };

                this.util.get('/hand/banciInfId', postData, 'formdata').then(res => {
                    console.log('案例获取', JSON.parse(JSON.stringify(res)))
                    let detail = res.data || [];

                    console.log('详情', JSON.parse(JSON.stringify(detail)))

                    this.detail = detail;
                })
            },
            confirm() {
                let detail = JSON.parse(JSON.stringify(this.detail));
                console.log('detail', detail)

                if (!detail.bc_mc) {
                    this.$Message.warning('请输入班次名称')
                    return;
                }

                detail.sxb = detail.sxb.slice(0, +detail.sxb_cs)

                let postData = detail

                let url = '/hand/addBanci';

                this.util.post(url, postData).then(res => {
                    if (res.status == 200) {
                        this.$Message.success(res.msg);
                        this.$router.back();
                    } else {
                        this.$Message.warning(res.msg)
                    }
                })

            },
        },
    }
</script>

